<template>
  <div class="main">
    <!-- 头部图片 -->
    <div class="head"></div>
    <!--主体部分 -->
    <div class="content">
      <!-- 左侧部分 -->
      <div class="left-box">
        <Top></Top>
        <In></In>
        <Below></Below>
      </div>
      <!-- 中间 -->
      <div class="centre-box">
        <Map></Map>
        <Histograms></Histograms>
      </div>
      <!-- 左侧 -->
      <div class="right-box">
        <Conclusion></Conclusion>
        <Linear></Linear>
        <Channel></Channel>
        <List></List>
      </div>
    </div>
  </div>
</template>

<script>
import Top from '@/views/left/Top.vue'
import In from '@/views/left/In.vue'
import Below from '@/views/left/Below.vue'

import Map from '@/views/middle/Map.vue'
import Histograms from '@/views/middle/Histograms.vue'

import Conclusion from '@/views/right/Conclusion.vue'
import Linear from '@/views/right/Linear.vue'
import Channel from '@/views/right/Channel.vue'
import List from '@/views/right/List.vue'
export default {
  name: 'EchratHome',
  data () {
    return {}
  },
  created () {},
  mounted () {},
  components: {
    Top,
    In,
    Below,
    Map,
    Histograms,
    Conclusion,
    Linear,
    Channel,
    List
  },
  methods: {}
}
</script>
<style lang="less" scoped>
.main {
  color: red;
  width: 100vw;
  height: 100%;
  background: url(@/assets/bg.jpg) no-repeat;
  background-size: cover;
  .head {
    height: 130px;
    background: url(@/assets/logo.png) no-repeat;
    background-size: contain;
  }
  .content {
    margin-top: -50px;
    display: flex;
    padding: 0 20px;
    .left-box {
      flex: 3;
    }
    .centre-box {
      flex: 4;
     padding: 0 20px;
    }
    .right-box {
      flex: 3;
      margin-right: 20px;
    }
  }
}
</style>
